<style scoped>
.hometop-container {
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    background: rgb(242, 243, 245);

    .logo {
        height: 100%;
        width: 150px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            height: 100%;
        }
    }

    .optionList {
        .option {
            font-size: 18px;
            padding: 20px;
            color: rgb(102, 102, 102);
            transition: color 0.3s;
            transition: transform 0.3s ease;
        }

        .option:hover {
            color: #b8db70;
            background: #ffffff;
            transform: translateY(-8px);
        }

        .option:hover::after {
            content: '';
            display: block;
            height: 8px;
        }
    }

    .rightBody {
        height: 100%;
        position: absolute;
        right: 0;
        display: flex;
        align-items: center;

        .wirtePost {}

        .user {
            border-radius: 50%;
            img {
                height: 50px;
                width: 50px;
            }
        }
    }
}

.selectedCategory {
    background: white;
}
.button {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 6px;
    font-size: 16px;
    font-weight: bold;
    color: #fff; /* 字体颜色 */
    background: linear-gradient(45deg, #ff7e5f, #feb47b); /* 渐变背景 */
    border: none;
    border-radius: 8px; /* 圆角 */
    text-align: center;
    text-decoration: none; /* 去掉下划线 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    cursor: pointer;
    transition: all 0.3s ease; /* 动画过渡 */
}

/* 鼠标悬浮效果 */
.button:hover {
    transform: translateY(-3px); /* 向上微动 */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* 阴影更深 */
    background: linear-gradient(45deg, #feb47b, #ff7e5f); /* 背景色反转 */
}

/* 鼠标按下效果 */
.button:active {
    transform: translateY(0); /* 按下恢复原位 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影减弱 */
}

</style>
<template>
    <div style="background: white;">
        <div class="hometop-container">
            <div class="logo" @click="jump('/')">
                <img src="../assets/logo.png" alt="logo">
                <div style="font-weight: bold;font-size: 24px; color: rgb(175, 220, 95);">养护植物</div>
            </div>
            <div class="optionList" v-for="(item, index) in CategoryList" :key="index"
                :class="index == curSelect ? 'selectedCategory' : ''"
                @click="toCategory('/category', { categoryId: item.value })">
                <div class="option">
                    {{ item.label }}
                </div>
            </div>
            <div class="rightBody">
                <div class="button" @click="newPageNeedToken('/getLicense/home')">考证专区</div>
                <div class="button" @click="newPageNeedToken('/note/home')">我的笔记</div>
                <div class="button" @click="newPageNeedToken('/myMistakes')">错题集</div>
                <SearchInput2 style="height: 100%;" v-if="!isSearchPage"></SearchInput2>
                <!-- 
                <div class="wirtePost" @click="jump('/wirtePost')">
                    写博客
                </div>
                 -->
                <div class="user" @click="toPersonCenter">
                    <img :src="this.avatar?this.avatar:'../assets/logo.png'" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { jump, newPage,newPageNeedToken } from '@/utils/commonFunction';
import { CategoryEnum } from '@/utils/commonEnum';
import SearchInput2 from './SearchInput2.vue';
export default {
    name: 'HomeTop',
    components: {
        SearchInput2
    },
    props: {
    },
    data() {
        return {
            curSelect: null,
            avatar:null,
        }
    },
    created() {
        this.curSelect = this.$route.query.categoryId;
        this.avatar = JSON.parse(localStorage.getItem('userInfo')).avatar;
        console.log(this.avatar);
    },
    computed: {
        CategoryList() {
            return Object.values(CategoryEnum);
        },
        isSearchPage() {
            return this.$route.name == 'searchPost';
        }
    },
    methods: {
        jump(url) {
            jump(url)
        },
        newPage,
        newPageNeedToken,
        toCategory(url, params) {
            newPage(url, params)
        },
        toPersonCenter() {
            var userInfo=JSON.parse(localStorage.getItem('userInfo'));
            jump(`/personCenter/${userInfo.id}`)
        }
    },
}

</script>